<template>
  <view class="page">
    <view class="nav-style" :style="{'height':navHeight+'px','padding-top':statusBarHeight+'rpx'}" @click="onBack">
      <image class="back-img" src="https://yun.shlxkj.info:44300/艾瑞测/小程序/static/img/back.png" mode=""></image>
      <view class="top-tl">知情同意书</view>
    </view>
    <view class="content">
      <!-- <mp-html :content="content" /> -->
    </view>
  </view>
</template>

<script>
import { getDictionaryByType } from '@/utils/api.js'
import MpHtml from '@/components/mp-html/mp-html'

export default {
  name: 'Agreement',
  components: {
    MpHtml
  },
  data() {
    return {
      statusBarHeight: '',
      navHeight: '',
      content: ''
    }
  },
  onLoad() {
    uni.getSystemInfo({
      success: (e) => {
        // this.compareVersion(e.SDKVersion, '2.5.0')
        let statusBar = 0
        let customBar = 0
        // #ifdef MP
        statusBar = e.statusBarHeight
        customBar = e.statusBarHeight + 45
        if (e.platform === 'android') {
          // this.$store.commit('SET_SYSTEM_IOSANDROID', false)
          customBar = e.statusBarHeight + 50
        }
        // #endif
        // #ifdef MP-WEIXIN
        statusBar = e.statusBarHeight
        // @ts-ignore
        const custom = wx.getMenuButtonBoundingClientRect()
        customBar = custom.bottom + custom.top - e.statusBarHeight
        // #endif
        // #ifdef APP-PLUS
        console.log('app-plus', e)
        statusBar = e.statusBarHeight
        customBar = e.statusBarHeight + 45
        // #endif
        // #ifdef H5
        statusBar = 0
        customBar = e.statusBarHeight + 45
        // #endif
        // 这里你可以自己决定存放方式，建议放在store中，因为store是实时变化的
        console.log('SET_STATUS_BAR', statusBar)
        console.log('SET_CUSTOM_BAR', customBar)
        console.log('SET_SYSTEM_INFO', e)
        this.statusBarHeight = statusBar
        this.navHeight = customBar
      }
    })
  },
  onShow() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await getDictionaryByType({ Type: 'UserAgreement' })
      if (res.Code === 200) {
        this.content = decodeURIComponent(res.Data[0].Value).replace(/\+style/g, ' style')
      }
      console.log(res)
    },
    onBack() {
      uni.navigateBack({
        delta: 1
      })
    },
  }
}
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  background-color: #1E64E1;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  width: 100%;
  position: relative;
  overflow: scroll;
  background-color: #ffffff;
  border-radius: 38rpx 38rpx 0rpx 0rpx;
  padding: 30rpx 23rpx;
  box-sizing: border-box;
}
.nav-style {
  display: flex;
  padding-left: 20rpx;
  align-items: center;
  .back-img {
    width: 36rpx;
    height: 36rpx;
  }
  //导航标题
  .top-tl {
    line-height: 54rpx;
    width: 630rpx;
    font-weight: 400;
    color: #FFFFFF;
    margin-left: 20rpx;
    font-size: 40rpx;
    overflow: hidden;
    text-align: center;
    /*超出部分隐藏*/
    white-space: nowrap;
    /*不换行*/
    text-overflow: ellipsis;
    /*超出部分文字以...显示*/
  }
}
</style>
